<template>
  <!-- 催收执行页-历史信息模块-外访行动历史 -->
  <section class="component visit-action-history">
    <!-- 搜索区域 -->
    <data-form :model="searchModel" @onSearch="refreshData" ref="form">
      <template slot="inputs">
        <el-form-item label="还款情况" prop="repaymentStatus">
          <el-select v-model="searchModel.repaymentStatus">
            <el-option
              v-for="{ index, name, code } in $dict.getDictData(
                'RepaymentStatus'
              )"
              :key="index"
              :label="name"
              :value="code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="外访人员" prop="operatorRealName">
          <el-input
            clearable
            v-model.trim="searchModel.operatorRealName"
          ></el-input>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box
      :data="dataSet"
      :height="200"
      :page="pageService"
      @onPageChange="refreshData"
    >
      <template slot="columns">
        <el-table-column
          prop="createTime"
          label="外访日期"
          :min-width="$helper.getColumnWidth(5)"
          :formatter="row => $filter.dateFormat(row.createTime)"
        >
        </el-table-column>
        <el-table-column
          prop="operatorRealName"
          label="外访人员"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="addressType"
          label="地址类型"
          :min-width="$helper.getColumnWidth(5)"
          :formatter="
            row => $filter.dictConvert(row.addressType, 'AddressType')
          "
        >
        </el-table-column>
        <el-table-column
          prop="addressDetail"
          label="外访地址"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="addressGps"
          label="定位地址"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="addressStatus"
          label="地址核实"
          :min-width="$helper.getColumnWidth(5)"
          :formatter="
            row => $filter.dictConvert(row.addressStatus, 'AddressStatus')
          "
        >
        </el-table-column>
        <el-table-column
          prop="custType"
          label="外访对象"
          :min-width="$helper.getColumnWidth(5)"
          :formatter="row => $filter.dictConvert(row.custType, 'CustType')"
        >
        </el-table-column>
        <el-table-column
          prop="targetName"
          label="姓名"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="relationship"
          label="关系"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="debtorStatus"
          label="债务人情况"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="
            row => $filter.dictConvert(row.debtorStatus, 'DebtorStatus')
          "
        >
        </el-table-column>
        <el-table-column
          prop="carStatus"
          label="车辆情况"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="row => $filter.dictConvert(row.carStatus, 'CarStatus')"
        >
        </el-table-column>
        <el-table-column
          prop="repaymentStatus"
          label="还款情况"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="
            row => $filter.dictConvert(row.repaymentStatus, 'RepaymentStatus')
          "
        >
        </el-table-column>
        <el-table-column
          prop="riskAssessment"
          label="风险评估"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="
            row => $filter.dictConvert(row.riskAssessment, 'RiskAssessment')
          "
        >
        </el-table-column>
        <el-table-column
          label="跟进时间"
          :min-width="$helper.getColumnWidth(5)"
          :formatter="row => $filter.dateFormat(row.followTime)"
        >
        </el-table-column>
        <el-table-column
          prop="propertyClues"
          label="财产线索"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="signPaperType"
          label="签署文件"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="
            row => $filter.dictConvertList(row.signPaperType, 'SignPaperType')
          "
        >
        </el-table-column>
        <el-table-column
          prop="followContent"
          label="外访描述"
          :min-width="$helper.getColumnWidth(10)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="personalOpinions"
          label="个人处理意见"
          :min-width="$helper.getColumnWidth(10)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="附件" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <el-button
              @click="
                (fileIds = scope.row.enclosureUrls
                  ? scope.row.enclosureUrls
                  : ''),
                  (dialog.enclosureDialog = true)
              "
              type="text"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </template>
    </data-box>
    <el-dialog
      :center="true"
      :visible.sync="dialog.enclosureDialog"
      title="附件信息"
      width="800px"
    >
      <enclosure-list
        :fileIds="fileIds"
        @close="dialog.enclosureDialog = false"
      ></enclosure-list>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";

import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { CASE_CHANNEL } from "~/config/enum.config";
import EnclosureList from "../collection-history-info/enclosure-list.vue";
import { namespace } from "vuex-class";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    EnclosureList
  }
})
export default class VisitActionHistory extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;

  private searchModel: any = {
    operatorRealName: "",
    repaymentStatus: ""
  };
  private fileIds: string = "";
  private dialog: any = {
    enclosureDialog: false
  };
  private dataSet: any[] = [];

  //重置搜索条件
  private resetSearchFelid() {
    const form: any = this.$refs["form"];
    form.resetForm();
  }
  //获取行动历史
  private refreshData() {
    this.searchModel.caseId = this.caseId;
    this.searchModel.followupType = CASE_CHANNEL.visit;
    this.caseOperatorPageService
      .caseFollowupRecord(this.searchModel, this.pageService, this.sortService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private activated() {
    this.refreshData();
  }
}
</script>

<style lang="less" scoped></style>
